<template>
    <el-container id="Index-container">
        <el-header>
            <ZHead />
        </el-header>
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
</template>
<script>
    import { ElMessage,ElMessageBox } from 'element-plus'
    import { useRouter } from 'vue-router'
    import ZHead from './ZHead.vue';
    export default {
        components:{
            ZHead
        },
        setup(){
            const router = useRouter();
            function logout (){
                ElMessageBox.confirm('您确定退出吗？','请确认',{
                    confirmButtonText:"确认",
                    cancelButtonText:"取消",
                    type:'warning'
                }).then(()=>{
                    try{
                        window.sessionStorage.setItem('token','');
                        router.push('/login');
                    }catch(err){
                        ElMessage.warning('出错了，详情查看控制台')
                        console.log('出错了',err);
                    }
                    ElMessage.warning('您已经成功退出')
                }).catch(()=>{
                    ElMessage.info('退出操作已取消')
                })
            }
    
            return {
                logout,
            }
        },
        beforeRouteEnter(to,from,next){
            let token = localStorage.getItem('token');
            if(token){
                console.log('用户信息',token);
                return next();
            }
            next('/login');
        }
    }
</script>
<style scoped>
    #Index-container{
        width: 100vw;
        height: 100vh;
        background-color: rgb(112, 112, 94);
    }
    .el-header{
        background-color: rgb(59, 28, 28);
        height: 70px;
        line-height: 70px;
        text-align: center;
        padding: 0px;
    }
    .el-aside{
        background-color: rgb(81, 49, 8);
        height: calc(100vh - 70px);
    }
    .el-main{
        width: 100vw;
        height: calc(100vh - 70px);
        background-color: white;
    }
    .logout_bt{
        float: right;
        transform: translateY(50%);
    }
    .tit{
        color: red;
        font-weight: 900;
    }

</style>